<template>
  <transition name="bounce" mode="out-in">
    <section class="mui-content bg-w pd">
      <mh-header headName="编辑资料"> </mh-header>

      <section class="detail-inner">

        <div class="mh-para" v-if='type==1'>
          <div class="nav-link">
            <a href="javascript:">择偶意向</a>
          </div>
          <div class="mh-para-cont">
            <ul class="info-list">
              <li class="flex intention" @tap="agePicker">
                <span class="label">年龄：</span>
                <input type="text" v-model='intentionInfo.intention_age_start' placeholder="请选择年龄" readonly>
              </li>
              <li class="flex intention" @tap="heightPicker">
                <span class="label">身高：</span>
                <input type="text" v-model='intentionInfo.intention_height_start' placeholder="请选择身高" readonly>
              </li>
              <li class="flex intention" @tap="sizePicker">
                <span class="label">体型：</span>
                <input type="text" v-model='intentionInfo.intention_shape' placeholder="请选择体型" readonly>
              </li>
              <li class="flex intention" @tap="eduPicker(1)">
                <span class="label">学历：</span>
                <input type="text" v-model='intentionInfo.intention_education' placeholder="请选择学历" readonly>
              </li>
              <li class="flex intention" @tap="incomePicker(1)">
                <span class="label">月收入：</span>
                <input type="text" v-model='intentionInfo.intention_income' placeholder="请选择月收入" readonly>
              </li>
              <li class="flex intention" @tap="cityPicker(1)">
                <span class="label">居住地：</span>
                <input type="text" v-model='intentionInfo.intention_residence' placeholder="请选择居住地" readonly>
              </li>
              <li class="flex intention" @tap="marryPicker(1)">
                <span class="label">婚姻状况：</span>
                <input type="text" v-model='intentionInfo.intention_marriage' placeholder="请选择婚姻状况" readonly>
              </li>
              <li class="flex intention" @tap="boolPicker(1)">
                <span class="label">购房情况：</span>
                <input type="text" v-model='intentionInfo.intention_house' placeholder="请选择购房情况" readonly>
              </li>
              <li class="flex intention" @tap="boolPicker(2)">
                <span class="label">有无子女：</span>
                <input type="text" v-model='intentionInfo.intention_children' placeholder="请选择有无子女" readonly>
              </li>
            </ul>
          </div>
        </div>

        <div class="mh-para" v-if='type==2'>
          <div class="nav-link">
            <a href="javascript:">基本资料</a>
          </div>
          <div class="mh-para-cont">
            <ul class="info-list">
              <li class="flex intention">
                <span class="label">ID：</span>
                <input type="text" v-model='baseInfo.id' readonly>
              </li>
              <li class="flex intention" @tap='statusPicker'>
                <span class="label">交友状态：</span>
                <input type="text" v-model='baseInfo.myStatus' placeholder="请选择交友状态" readonly>
                      <!--交友 脱单 征婚-->
              </li>
              <li class="flex intention">
                <span class="label">倒计时：</span>
                <input type="text" v-model='baseInfo.time' placeholder="请设置交友倒计时">
                      <!--年月-->
              </li>
              <li class="flex intention">
                <span class="label">昵称：</span>
                <input type="text" v-model='baseInfo.nickname' placeholder="请输入昵称">
              </li>
              <li class="flex intention" @tap="sexPicker">
                <span class="label">性别：</span>
                <input type="text" v-model='baseInfo.gender' placeholder="请选择性别" readonly>
              </li>
              <li class="flex intention" @tap="datePicker">
                <span class="label">生日：</span>
                <input type="text" v-model='baseInfo.birthday' placeholder="请选择生日" readonly>
              </li>
              <li class="flex intention">
                <span class="label">属相：</span>
                <input type="text" v-model='baseInfo.zodiac' placeholder="请输入星座">
              </li>
              <li class="flex intention">
                <span class="label">星座：</span>
                <input type="text" v-model='baseInfo.constellation' placeholder="请输入星座">
              </li>
              <li class="flex intention">
                <span class="label">身高：</span>
                <input type="text" v-model='baseInfo.height' placeholder="请输入身高">
              </li>
              <li class="flex intention" @tap='eduPicker(2)'>
                <span class="label">学历：</span>
                <input type="text" v-model='baseInfo.education' placeholder="请选择学历" readonly>
              </li>
              <li class="flex intention">
                <span class="label">职业：</span>
                <input type="text" v-model='baseInfo.occupation' placeholder="请输入职业">
              </li>
              <li class="flex intention" @tap="marryPicker(2)">
                <span class="label">婚姻状况：</span>
                <input type="text" v-model='baseInfo.marriage' placeholder="请选择婚姻状况" readonly>
              </li>
              <li class="flex intention" @tap="boolPicker(3)">
                <span class="label">子女情况：</span>
                <input type="text" v-model='baseInfo.children' placeholder="请选择有无子女" readonly>
              </li>
              <li class="flex intention" @tap="cityPicker(2)">
                <span class="label">所在地区：</span>
                <input type="text" v-model='baseInfo.province' placeholder="请选择所在地区" readonly>
              </li>
              <li class="flex intention" @tap="cityPicker(3)">
                <span class="label">家乡：</span>
                <input type="text" v-model='baseInfo.hometown' placeholder="请选择家乡" readonly>
              </li>
              <li class="flex intention" @tap="incomePicker(2)">
                <span class="label">月收入：</span>
                <input type="text" v-model='baseInfo.income' placeholder="请选择月收入" readonly>
              </li>
              <li class="flex intention">
                <span class="label">购房情况：</span>
                <input type="text" v-model='baseInfo.house' placeholder="请输入购房套数">
              </li>
              <li class="flex intention">
                <span class="label">房产面积：</span>
                <input type="text" v-model='baseInfo.house_details' placeholder='多套房用","隔开'>
              </li>
              <li class="flex intention">
                <span class="label">居住状态：</span>
                <input type="text" v-model='baseInfo.liveStatus' placeholder="请输入居住状态">
              </li>
              <li class="flex intention" @tap="boolPicker(5)">
                <span class="label">购车情况：</span>
                <input type="text" v-model='baseInfo.car' placeholder="请选择购车情况" readonly>
              </li>
              <li class="flex intention">
                <span class="label">车型：</span>
                <input type="text" v-model='baseInfo.car' placeholder="请输入车型" readonly>
              </li>
              <li class="flex intention">
                <span class="label">微信号：</span>
                <input type="text" v-model='baseInfo.weixin' placeholder="请输入微信号">
              </li>
              <li class="flex intention">
                <span class="label">手机号码：</span>
                <input type="text" v-model='baseInfo.phone' placeholder="请输入手机号码">
              </li>
              <li class="flex intention">
                <span class="label">电话号码：</span>
                <input type="text" v-model='baseInfo.telephone' placeholder="请输入电话号码">
              </li>
              <li class="flex intention">
                <span class="label">QQ：</span>
                <input type="text" v-model='baseInfo.qq' placeholder="请输入QQ号">
              </li>
              <li class="flex intention">
                <span class="label">其他方式：</span>
                <input type="text" v-model='baseInfo.other_model' placeholder="请输入其他联系方式">
              </li>
            </ul>
          </div>
        </div>

        <div class="mh-para" v-if='type==3'>
          <div class="nav-link">
            <a href="javascript:">小档案</a>
          </div>
          <div class="mh-para-cont">
            <ul class="info-list">
              <li class="flex intention" @tap="cityPicker(4)">
                <span class="label">家乡：</span>
                <input type="text" v-model='fileInfo.hometown' placeholder="请选择家乡" readonly>
              </li>
              <li class="flex intention" @tap="cityPicker(5)">
                <span class="label">户口：</span>
                <input type="text" v-model='fileInfo.registered_residence' placeholder="请选择家乡" readonly>
              </li>
              <li class="flex intention">
                <span class="label">民族：</span>
                <input type="text" v-model='fileInfo.nation' placeholder="未填写">
              </li>
              <li class="flex intention">
                <span class="label">属相：</span>
                <input type="text" v-model='fileInfo.zodiac' placeholder="未填写">
              </li>
              <li class="flex intention">
                <span class="label">星座：</span>
                <input type="text" v-model='fileInfo.constellation' placeholder="未填写">
              </li>
              <li class="flex intention">
                <span class="label">血型：</span>
                <input type="text" v-model='fileInfo.blood_type' placeholder="未填写">
              </li>
              <li class="flex intention">
                <span class="label">体型：</span>
                <input type="text" v-model='fileInfo.shape' placeholder="未填写">
              </li>
              <li class="flex intention">
                <span class="label">体重：</span>
                <input type="text" v-model='fileInfo.weight' placeholder="未填写">
              </li>
              <li class="flex intention">
                <span class="label">相貌自评：</span>
                <input type="text" v-model='fileInfo.looks' placeholder="未填写">
              </li>
              <li class="flex intention">
                <span class="label">宗教信仰：</span>
                <input type="text" v-model='fileInfo.religion' placeholder="未填写">
              </li>
              <li class="flex intention">
                <span class="label">是否喝酒：</span>
                <input type="text" v-model='fileInfo.is_drink' placeholder="未填写">
              </li>
              <li class="flex intention">
                <span class="label">是否抽烟：</span>
                <input type="text" v-model='fileInfo.is_smoking' placeholder="未填写">
              </li>
              <li class="flex intention">
                <span class="label">生活作息：</span>
                <input type="text" v-model='fileInfo.lifestyle' placeholder="未填写">
              </li>
            </ul>
          </div>
        </div>

        <div class="mh-para" v-if='type==4'>
          <div class="nav-link">
            <a href="javascript:">教育及工作</a>
          </div>
          <div class="mh-para-cont">
            <ul class="info-list">
              <li class="flex intention">
                <span class="label">毕业院校：</span>
                <input type="text" v-model='educateWork.graduation' placeholder="未填写">
              </li>
              <li class="flex intention">
                <span class="label">所属专业：</span>
                <input type="text" v-model='educateWork.major' placeholder="未填写">
              </li>
              <li class="flex intention">
                <span class="label">职业职务：</span>
                <input type="text" v-model='educateWork.duties' placeholder="未填写">
              </li>
              <li class="flex intention">
                <span class="label">公司性质：</span>
                <input type="text" v-model='educateWork.company_nature' placeholder="未填写">
              </li>
              <li class="flex intention">
                <span class="label">公司行业：</span>
                <input type="text" v-model='educateWork.company_industry' placeholder="未填写">
              </li>
              <li class="flex intention">
                <span class="label">工作状态：</span>
                <input type="text" v-model='educateWork.workStatus' placeholder="未填写">
              </li>
              <li class="flex intention">
                <span class="label">掌握语言：</span>
                <input type="text" v-model='educateWork.language' placeholder="未填写">
              </li>
            </ul>
          </div>
        </div>

        <div class="mh-para" v-if='type==5'>
          <div class="nav-link">
            <a href="javascript:">家庭情况</a>
          </div>
          <div class="mh-para-cont">
            <ul class="info-list">
              <li class="flex intention">
                <span class="label">家中排行：</span>
                <input type="text" v-model='family.ranking' placeholder="未填写">
              </li>
              <li class="flex intention">
                <span class="label">父母情况：</span>
                <input type="text" v-model='family.parents' placeholder="未填写">
              </li>
              <li class="flex intention">
                <span class="label">父亲工作：</span>
                <input type="text" v-model='family.father_work' placeholder="未填写">
              </li>
              <li class="flex intention">
                <span class="label">母亲工作：</span>
                <input type="text" v-model='family.mother_work' placeholder="未填写">
              </li>
              <li class="flex intention">
                <span class="label">父母经济：</span>
                <input type="text" v-model='family.parent_economics' placeholder="未填写">
              </li>
              <li class="flex intention">
                <span class="label">父母医保：</span>
                <input type="text" v-model='family.parent_insurance' placeholder="未填写">
              </li>
              <li class="flex intention">
                <span class="label">父母联系方式：</span>
                <input type="text" v-model='family.parent_contact' placeholder="未填写">
              </li>
            </ul>
          </div>
        </div>

        <div class="mh-para" v-if='type==6'>
          <div class="nav-link">
            <a href="javascript:">爱情规划</a>
          </div>
          <div class="mh-para-cont">
            <ul class="info-list">
              <li class="flex intention">
                <span class="label">想何时结婚：</span>
                <input type="text" v-model='lovePlan.when_marry' placeholder="未填写">
              </li>
              <li class="flex intention">
                <span class="label">愿与对方父母同住：</span>
                <input type="text" v-model='lovePlan.live_together' placeholder="未填写">
              </li>
              <li class="flex intention">
                <span class="label">是否想要小孩：</span>
                <input type="text" v-model='lovePlan.want_kids' placeholder="未填写">
              </li>
              <li class="flex intention">
                <span class="label">偏爱的约会方式：</span>
                <input type="text" v-model='lovePlan.tryst_model' placeholder="未填写">
              </li>
              <li class="flex intention">
                <span class="label">希望对方看重：</span>
                <input type="text" v-model='lovePlan.hope_fancy' placeholder="未填写">
              </li>
              <li class="flex intention">
                <span class="label">期待的婚礼形式：</span>
                <input type="text" v-model='lovePlan.wedding_form' placeholder="未填写">
              </li>
              <li class="flex intention">
                <span class="label">厨艺状况：</span>
                <input type="text" v-model='lovePlan.cooking' placeholder="未填写">

              </li>
              <li class="flex intention">
                <span class="label">家务分工：</span>
                <input type="text" v-model='lovePlan.housework' placeholder="未填写">
              </li>
            </ul>
          </div>
        </div>
        <div class="btn-row">
          <button type="button" class="mui-btn-block mh-btn" @click='submit'>保存</button>
        </div>
      </section>

    </section>
  </transition>
</template>

<script>
  import MhHeader from '@/components/mh-header/mh-header';
  import {MH_API} from "@/api/api";
  import {cityData} from "@/assets/js/city.data-3";
  export default {
    name: "detail",
    data () {
      return {
        talents: [],
        dynamicPic: [],
        intentionInfo: {
          intention_age_start: '',
          age: '20-27',
          height: '170cm',
          bodyType: '偏瘦',
          edu: '',
          income: '',
          address: '',
          marriage: '',
          house: '',
          child: ''
        },
        baseInfo: {
          id: '54815223333',
          nickname: 'Darvin',
          sex: '男',
          birthday: '',
          zodiac: '',
          height: '',
          constellation: '',
          edu: '',
          career: '',
          marriage: '',
          child: '',
          city: '',
          hometown: '',
          income: '',
          house: '',
          house_details: '',//房产面积
          liveStatus: '',
          car: '',
          wechat: '',
          phone: '',
          tel: '',
          qq: '',
          other: '',
          myStatus: ''
        },
        fileInfo: {
          hometown: '北京',
          account: '东城区',
          nationality: '汉族',
          zodiac: '',
          constellation: '',
          blood: '',
          bodyType: '',
          weight: '',
          selfEvaluation: '',
          faith: '',
          drink: '',
          smoke: '',
          lifestyle: ''
        },
        educateWork: {
          graduatedSchool: '',
          profession: '',
          position: '',
          comType: '',
          comIndustry: '',
          workStatus: '',
          lang: ''
        },
        family: {
          ranking: '老大',
          parents: '公务员',
          father: '',
          mother: '',
          parentsEconomic: '',
          parentsMedical: '',
          parentsContact: ''
        },
        lovePlan: {
          marryTime: '',
          willingLiveParents: '',
          wilingChild: '',
          preferDating: '',
          hopeValue: '',
          expectWedding: '',
          cooking: '',
          houseWork: ''
        },
        hobby: [],
        guessLike: [],
        info: {},
        ageList: [
          {text: '18-25'},
          {text: '26-35'},
          {text: '36-45'}
        ],
        heightList: [
          {text: '150-160'},
          {text: '160-170'},
          {text: '170-180'}
        ],
        sizeList: [
          {text: '偏瘦'},
          {text: '中等'},
          {text: '偏胖'}
        ],
        eduList: [
          {text: '小学'},
          {text: '初中'},
          {text: '高中'},
          {text: '大专'},
          {text: '本科'},
          {text: '硕士'},
          {text: '博士'}
        ],
        incomeList: [
          {text: '3000-5000'},
          {text: '6000-10000'},
          {text: '10000以上'}
        ],
        boolList: [
          {text: '无'},
          {text: '有'}
        ],
        sexList: [
          {text: '男'},
          {text: '女'}
        ],
        marryList: [{
          text:'单身'
        },{
          text:'离异'
        },{
          text:'丧偶'
        },{
          text:'已婚'
        },{
          text:'保密'
        }],
        statusList: [
          {text: '交友'},
          {text: '脱单'},
          {text: '征婚'}
        ],
      }
    },
    computed: {

    },
    mounted () {

    },
    created () {
      let id = this.$route.query.id || 1103;
      let type = this.$route.query.type || 1;
      this.id = id;
      this.type = type;
      let self = this;
      let params = {
        id: id
      };
      MH_API.getUserInfo(params).then(res => {
        if (res.status === 200) {
          self.info = res.data;
          self.intentionInfo = res.data;//择偶
          self.baseInfo = res.data;//基本信息
          self.fileInfo = res.data;//小档案
          self.educateWork = res.data;//教育及工作
          self.family = res.data;
          self.lovePlan = res.data;
          //self.dynamicPic = res.data.images;
        }
      })
    },
    methods: {
      agePicker(){
        let self = this;
        let picker = new mui.PopPicker();
        picker.setData(self.ageList);
        picker.show(function (selectItems) {
          self.intentionInfo.intention_age_start = selectItems[0].text;
        })
      },
      heightPicker(){
        let self = this;
        let picker = new mui.PopPicker();
        picker.setData(self.heightList);
        picker.show(function (selectItems) {
          self.intentionInfo.intention_height_start = selectItems[0].text;
        })
      },
      sizePicker(){
        let self = this;
        let picker = new mui.PopPicker();
        picker.setData(self.sizeList);
        picker.show(function (selectItems) {
          self.intentionInfo.intention_shape = selectItems[0].text;
        })
      },
      eduPicker(type){
        let self = this;
        let picker = new mui.PopPicker();
        picker.setData(self.eduList);
        picker.show(function (selectItems) {
          if(type==1){
            self.intentionInfo.intention_education = selectItems[0].text;
          }
          else if(type==2){
            self.baseInfo.education = selectItems[0].text;
          }
        })
      },
      incomePicker(type){
        let self = this;
        let picker = new mui.PopPicker();
        picker.setData(self.incomeList);
        picker.show(function (selectItems) {
          if(type==1){
            self.intentionInfo.intention_income = selectItems[0].text;
          }
          else if(type==2){
            self.baseInfo.income = selectItems[0].text;
          }
        })
      },
      _getParam (obj, param) {
        return obj[param] || '';
      },
      cityPicker(type) {
        let self = this;
        let cityPicker = new mui.PopPicker({
          layer: 2
        });
        cityPicker.setData(cityData);
        cityPicker.show(function(items) {
          let thisVal = `${self._getParam(items[0], 'text')}${self._getParam(items[1], 'text')}`;
          if(type==1){
            self.intentionInfo.intention_residence = thisVal;
          }
          else if(type==2){
            self.baseInfo.province = thisVal;
          }
          else if(type==3){
            self.baseInfo.hometown = thisVal;
          }
          else if(type==4){
            self.fileInfo.hometown = thisVal;
          }
          else if(type==5){
            self.fileInfo.registered_residence = thisVal;
          }
        });
      },
      boolPicker(type){
        let self = this;
        let picker = new mui.PopPicker();
        picker.setData(self.boolList);
        picker.show(function (selectItems) {
          if(type==1){
            self.intentionInfo.intention_house = selectItems[0].text;
          }
          else if(type==2){
            self.intentionInfo.intention_children = selectItems[0].text;
          }
          else if(type==3){
            self.baseInfo.children = selectItems[0].text;
          }
          else if(type==4){
            self.baseInfo.house = selectItems[0].text;
          }
          else if(type==5){
            self.baseInfo.car = selectItems[0].text;
          }
        })
      },
      marryPicker(type){
        let self = this;
        let picker = new mui.PopPicker();
        picker.setData(self.marryList);
        picker.show(function (selectItems) {
          if(type==1){
            self.intentionInfo.intention_marriage = selectItems[0].text;
          }
          else if(type==2){
            self.baseInfo.marriage = selectItems[0].text;
          }
        })
      },
      sexPicker(){
        let self = this;
        let picker = new mui.PopPicker();
        picker.setData(self.sexList);
        picker.show(function (selectItems) {
          self.baseInfo.gender = selectItems[0].text;
        })
      },
      statusPicker(){
        let self = this;
        let picker = new mui.PopPicker();
        picker.setData(self.statusList);
        picker.show(function (selectItems) {
          self.baseInfo.myStatus = selectItems[0].text;
        })
      },
      datePicker () {
        let self = this;
        let dtPicker = new mui.DtPicker();
        dtPicker.show(function (selectItems) {
          self.baseInfo.birthday = selectItems.value;
        })
      },
      submit(){
        let self = this;
        console.log(self.baseInfo)
        //return false
        let type = self.type;
        let params = {
          id: self.id,
          //择偶意向
          intention_age_start: self.intentionInfo.intention_age_start,
          intention_height_start: self.intentionInfo.intention_height_start,
          intention_shape: self.intentionInfo.intention_shape,
          intention_education: self.intentionInfo.intention_education,
          intention_income: self.intentionInfo.intention_income,
          intention_residence: self.intentionInfo.intention_residence,
          intention_marriage: self.intentionInfo.intention_marriage,
          intention_house: self.intentionInfo.intention_house,
          intention_children: self.intentionInfo.intention_children,
        };
        if(type==2){
          params = {
            id: self.id,
            //基本资料
            myStatus: self.baseInfo.myStatus,
            time: self.baseInfo.time,
            nickname: self.baseInfo.nickname,
            gender: self.baseInfo.gender,
            birthday: self.baseInfo.birthday,
            zodiac: self.baseInfo.zodiac,
            constellation: self.baseInfo.constellation,
            height: self.baseInfo.height,
            education: self.baseInfo.education,
            occupation: self.baseInfo.occupation,
            marriage: self.baseInfo.marriage,
            children: self.baseInfo.children,
            province: self.baseInfo.province,
            hometown: self.baseInfo.hometown,
            income: self.baseInfo.income,
            house: self.baseInfo.house,
            house_details: self.baseInfo.house_details.split(","),
            liveStatus: self.baseInfo.liveStatus,
            car: self.baseInfo.car,
            weixin: self.baseInfo.weixin,
            phone: self.baseInfo.phone,
            telephone: self.baseInfo.telephone,
            qq: self.baseInfo.qq,
            other_model: self.baseInfo.other_model,
          };
        }
        else if(type==3){
          params = {
            id: self.id,
            //小档案
            hometown: self.fileInfo.hometown,
            registered_residence: self.fileInfo.registered_residence,
            nation: self.fileInfo.nation,
            zodiac: self.fileInfo.zodiac,
            constellation: self.fileInfo.constellation,
            blood_type: self.fileInfo.blood_type,
            shape: self.fileInfo.shape,
            weight: self.fileInfo.weight,
            looks: self.fileInfo.looks,
            religion: self.fileInfo.religion,
            is_drink: self.fileInfo.is_drink,
            is_smoking: self.fileInfo.is_smoking,
            lifestyle: self.fileInfo.lifestyle,
          }
        }
        else if(type==4){
          params = {
            id: self.id,
            //教育及工作
            graduation: self.educateWork.graduation,
            major: self.educateWork.major,
            duties: self.educateWork.duties,
            company_nature: self.educateWork.company_nature,
            company_industry: self.educateWork.company_industry,
            workStatus: self.educateWork.workStatus,
            language: self.educateWork.language,
          }
        }
        else if(type==5){
          params = {
            id: self.id,
            //家庭情况
            ranking: self.family.ranking,
            parents: self.family.parents,
            father_work: self.family.father_work,
            mother_work: self.family.mother_work,
            parent_economics: self.family.parent_economics,
            parent_insurance: self.family.parent_insurance,
            parent_contact: self.family.parent_contact,
          }
        }
        else if(type==6){
          params = {
            id: self.id,
            //爱情规划
            when_marry: self.lovePlan.when_marry,
            live_together: self.lovePlan.live_together,
            want_kids: self.lovePlan.want_kids,
            tryst_model: self.lovePlan.tryst_model,
            hope_fancy: self.lovePlan.hope_fancy,
            wedding_form: self.lovePlan.wedding_form,
            cooking: self.lovePlan.cooking,
            housework: self.lovePlan.housework,
          }
        }
        
        MH_API.editInfo(params).then(res => {
          if (res.status === 200) {
            mui.toast('编辑成功');
            setTimeout(function(){
              self.$router.go(-1)
            }, 1500)
          }
          else{
            mui.toast(res.msg)
          }
        })
      }
    },
    components: {
      MhHeader
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../assets/css/mixin";
  .btn-row{ display:block; margin: 2rem;}
  .intention input{ border:none; border-radius:0; height: 3rem; text-align:right;margin-bottom:0;}

  .swiper-container {
    width: 100%;
    height: 100%;
  }
  .swiper-slide {
    text-align: center;
    background: #eee;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .meet-detail {
    width: 100%;
    height: 100%;
    background: url("../../assets/images/bg/bg_detail.png") no-repeat left top;
    background-size: 100% 12.5rem;
    overflow: auto;
    .detail-inner {background: #fff;}
  }
  .detail-head {padding: 0;overflow: auto;}
  .ic-share {
    margin-top: .5rem;
    margin-right: 1.5rem;
    img {width: 1.85rem;height: auto;}
  }
  .ic-export {
    margin-top: .5rem;
    margin-right: 1.5rem;
    img {width: 2rem;height: auto;}
  }
  .avatar {
    position: relative;
    width: 100%;
    height: 13.5rem;
  }
  .avatar-pic-inner {
    @include cl;
    width: 7rem;
    height: 7rem;
    border-radius: 100%;
    /*overflow: hidden;*/
    border: 3px solid rgba(255, 255, 255, .8);
    background-color: #999999;
    bottom: 0;
  }
  .avatar-pic {
    position: relative;
    height: 100%;
    img {
      width: 100%;
      height: 100%;
      border-radius: 100%;
    }
    .ic-member {
      position: absolute;
      width: 3rem;
      height: 3rem;
      background: url("../../assets/images/ico/ico_member.png") no-repeat center;
      background-size: 100% 100%;
      right: 0;
      top: -2rem;
      z-index: 4;
    }
  }
  .match-maker {
    @include ct;
    right: 0;
  }
  .match-avatar {
    float: right;
    display: flex;
    align-items: center;
    width: 9.6rem;
    height: 3.6rem;
    padding: .3rem;
    @include sc(1.2rem, #fff);
    background: #7f9ba7;
    border-top: .1rem solid #fff;
    border-bottom: .1rem solid #fff;
    border-top-left-radius: 1.75rem;
    border-bottom-left-radius: 1.75rem;
    img {
      width: 3rem;
      height: 3rem;
      margin-right: .4rem;
      border-radius: 100%;
    }
  }
  .main-info {
    margin: 1.2rem 0;
    .sub-info {@include sc(1.2rem, #666);}
  }
  .user-name {@include sc(1.5rem, #333);}
  .img-box {
    @include mh-avatar-box(4.5rem,4.5rem);
    margin-bottom: .5rem;
    background-color: #eeeeee;
  }
  .mh-para {
    padding-bottom: 1rem;
    background: #fff;
    border-bottom: 1px solid #eee;
    h4 {padding: 1.5rem;}
    .img-wrapper {padding: 0 1.5rem;}
    &.border {
      margin-top: 1.5rem;
      border-top: .05rem solid #eee;
    }
  }
  .talent-wrapper {
    width: 100%;
    height: 10rem;
    padding-right: 1.5rem;
    .talent-list {
      height: 10rem;
      overflow: hidden;
      flex: 1;
    }
    .btn-more {
      display: flex;
      height: 100%;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 4.75rem;
      float: right;
      @include sc(1.2rem, #999);
      background: #fff;
      img {
        width: 2rem;
      }
    }
  }
  .intro {
    @include sc(1.2rem, #999);
    padding: 0 1.5rem;
  }
  .link-pink {@include sc(1.2rem, #eb537f);}
  .info-list {
    padding: 0 1.5rem;
    .intention {
      padding: .6rem 0; line-height:3rem; border-bottom:1px solid #eee;
    }
    span {
      width: 50%;
      @include sc(1.2rem, #999);
      &.active {color: #666;}
    }
  }

  .hobby {
    padding: .3rem .9rem;
    margin-right: 1rem;
    color: #fff;
    font-size: 1.2rem;
    border-radius: 1.2rem;
    background-image: linear-gradient(180deg, #dd65a1 20%,#fa625a 100%);
  }

  .mh-back {
    width: 3rem;
    height: 3rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      height: 1.75rem;
    }
  }
  .file-complete {
    justify-content: center;
    .complete-per {@include sc(1.2rem, #666);}
  }
  .mui-progressbar {
    width: 25%;
    height: .5rem;
    margin-left: 1rem;
    background: #eee;
    border-radius: .4rem;
    span {
      border-radius: .4rem;
      background: linear-gradient(180deg, #dd65a1 0%, #fa625a 100%);
    }
  }
  .nav-link {
    position: relative;
    padding-left: 1.5rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
    a {@include sc(1.4rem, #333);}
    span {@include sc(1.2rem, #999);margin-right: 2.5rem;}
    .btn-edit {
      margin-right: 1.5rem;
      padding: .1rem .6rem;
      @include sc(1.2rem, #f26c60);
      border: 1px solid #f26c60;
    }
  }
  .mui-table-view-cell>a:not(.mui-btn) {
    @include sc(1.5rem, #333);
  }
</style>
